<template>
	<view class="talent">
		<view class="top-img">
			<image class="img" src="../../static/image/bg2.png"></image>
			<view class="qr-code" @click="preview(imageCode, [{url: imageCode}])">
				<image class="img" :src="imageCode"></image>
			</view>
		</view>
		<view class="btn-box">
			<u-button shape="circle" :custom-style="customStyle" @click="publishPost">发布工作</u-button>
		</view>
		<view class="list-wrap">
			<view class="list-item" v-for="(item,index) in list" :key="index" @click.stop="editActivity(item)">
				<view class="item-title">
					
					<text class="name"><text class="panal" v-if="item.recruit_types ==1">临时工</text><text class="panalc" v-if="item.recruit_types ==2">长期工</text>{{ item.recruit_type_work }}</text>
					<text class="price">{{ item.recruit_salary }}</text>
				</view>
				<view class="item-con">
					<view class="con-row">
						<text class="txt">具体要求：</text>
						<view class="txt-con">
							{{ item.recruit_requirement }}
						</view>
					</view>
					<view class="flex-row">
						<view class="left-info">
							<view class="row">
								开工时间：<text class="light">{{ item.recruit_start_time}}</text>
							</view>
							<view class="row">
								应聘人数：<text class="light">{{ item.recruit_ordered }}/{{ item.recruit_people_number }}</text>
							</view>
							<view class="row">
								分享次数：<text class="light">{{item.recruit_share_num}}</text>
							</view>
							<view class="row" @click="openLocation(item)">
								{{ item.recruit_address }}
								<text v-if="item.compName">({{ item.compName }})</text>
							</view>
						</view>
						<view class="right-info">
							<image v-if="item.status == 'FB'" class="img" src="../../static/image/publish.png"></image>
							<image v-if="item.status == 'XJ'" class="img" src="../../static/image/yxj.png"></image>
						</view>
					</view>
					<view class="con-bottom">
						<view class="img-box">
							<template v-for="(img, inds) in item.recruit_pic">
								<image v-if="img.images_file_type == 'image'" class="img" :key="inds" :src="img.images_url" @click.stop="previewImageVideo(item, inds)"></image>
								<video v-if="img.images_file_type == 'video'" class="img" :key="inds" :src="img.images_url" :show-center-play-btn="false" :controls="false" @click.stop="previewImageVideo(item, inds)"></video>
							</template>
						</view>
					</view>
					<view class="btn-wrap">
						<!-- <u-button v-if="item.status == 'FB'" shape="circle" size="medium" :custom-style="customStyle2" @click.stop="offShelf(item)">下架</u-button>
						<u-button v-if="item.status == 'XJ'" shape="circle" size="medium" :custom-style="customStyle2" @click.stop="deleteActivity(item)">删除</u-button>
						<u-button v-if="item.isRefuYj" shape="circle" size="medium" :custom-style="customStyle2" style="margin-left:10px;" @click.stop="refund(item)">退佣金</u-button> -->
					
						<u-button shape="circle" :custom-style="customStyle2" @click.stop="reEdit(item)">编辑重发</u-button>
					</view>
				</view>
				<view class="table-wrap" v-if="item.recruit_ordered>0">
					<view class="list" v-if="item.show">
						<u-table>
							<u-tr>
								<u-th>昵称</u-th>
								<u-th>电话号码</u-th>
							</u-tr>
							<u-tr v-for="(item2,ind) in item.recruit_orderedlist" :key="ind">
								<u-td>{{ item2.nickname }}</u-td>
								<u-td>
									<text style="color: #007AFF;" @click="makeCall(item2.phone)">{{ item2.phone }}</text>
								</u-td>
							</u-tr>
						</u-table>
					</view>
					<view class="more" @click="toggleShow(item)" >
						<template v-if="item.show == false">
							<text class="txt">展开雇工电话号码</text>
							<u-icon name="arrow-down"></u-icon>
						</template>
						<template v-else>
							<text class="txt">收起雇工电话号码</text>
							<u-icon name="arrow-up"></u-icon>
						</template>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<!-- 加载更多 -->
		<u-loadmore v-if="list.length" :status="loadStatus" bg-color="#f5f8ff" :margin-top="20" :margin-bottom="20" />
		<!-- 显示询问是否下架工作 -->
		<u-modal v-model="isShow" content="已经应聘的佣金部分将不再退还,确认下架？" :show-cancel-button="true" @confirm="confirmOffActivity"></u-modal>
		<!-- 显示询问是否删除工作 -->
		<u-modal v-model="isShow2" content="确定要删除该工作？" :show-cancel-button="true" @confirm="confirmDelete"></u-modal>
		<!-- 显示询问是否退押金 -->
		<u-modal v-model="isShow3" content="未应聘的佣金将退还到账户" :show-cancel-button="true" @confirm="confirmRefund"></u-modal>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: 'talent', // 招人
		data() {
			return {
				customStyle: {
					'background': '#E04110',
					'border-color': '#E04110',
					'color': '#fff'
				},
				customStyle2: {
					'height': '50rpx',
					'line-height': '50rpx',
					'padding': '0 40rpx',
					'font-size': '26rpx',
					'background': '#4341BF',
					'border-color': '#4341BF',
					'color': '#fff',
					'margin-left': '20rpx',
					'display': 'inline-block',
					'vertical-align': 'middle'
				},
				params: {
					columns: 'crtDt',
					orders: 'DESC',
					startRow: 1,
					rowSize: 10,
				},
				list: [],
				isShow: false,
				isShow2: false,
				isShow3: false,
				imageCode: '',
			}
		},
		computed: {
			...mapState({
				userId: state => state.userId
			})
		},
		onShow() {

		},
		onLoad() {
			let token = uni.getStorageSync('token');
			if (token) {
				this.dropDown();
				this.generateCode();
			} else {
				uni.redirectTo({
					url: '/pages/login'
				})
			}
		},
		onPullDownRefresh() {
			this.dropDown();
		},
		onReachBottom() {
			this.pullUp();
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				
			}
			return {
				title: '云招人职业介绍所',
				path: '/pages/index/index'
			}
		},
		methods: {
			// 下拉刷新
			dropDown() {
				let token = uni.getStorageSync('token');
				if (token) {
					// 修改当前view的数据
					this.params.startRow = 1;
					// 加载下拉刷新的数据
					this.postPageQueryByWork('down');
				}
			},
			// 上拉加载
			pullUp() {
				// 增加页数
				this.params.startRow++;
				// 请求获取数据
				this.postPageQueryByWork('up');
			},
			// 活动管理-查询活动列表
			postPageQueryByWork(type) {
				this.$u.api
					.postPageQueryByWork(this.params)
					.then(res => {
						uni.stopPullDownRefresh();
						if (res.status == true) {
							let data = res.data;
							data = data.map(item => {
								return {
									...item,
									show: false
								}
							})

							// 如果是上拉加载
							if (type == 'up') {
								// 判断分页
								if (data.length <= this.params.rowSize) {
									this.list.push(...data);
									this.loadStatus = 'loading';

									// 如果数量小于页容量，显示没有更多数据
									if (data.length < this.params.rowSize) {
										this.loadStatus = 'nomore';
									}
								} else {
									this.params.rowSize = res.data.total;
									this.loadStatus = 'nomore';
								}
							}

							// 如果是下拉刷新
							if (type == 'down') {
								// 将数据
								this.list.push(...data);
								this.list.splice(0, this.list.length == 0 ? 0 : this.list.length - data.length);
							}
						}
					})
					.catch(err => {
						uni.stopPullDownRefresh();
					});
			},
			preview(url, urls) {
				uni.previewImage({
					current: url,
					urls: urls.map(item => item.url)
				})
			},
			publishPost() { // 发布工作
				uni.navigateTo({
					url: '/pages/talent/publish-post'
				})
			},
			offShelf(item) { // 下架
				this.current = item;
				this.isShow = true;
			},
			confirmOffActivity() {
				let params = {
					id: this.current.id
				}
				this.$u.api.postOffShelfe(params).then(res => {
					if (res.code == 1000) {
						this.$refs.uToast.show({
							title: '已下架工作'
						});
						this.dropDown();
					}
				})
			},
			deleteActivity(item) { // 删除活动
				this.current = item;
				this.isShow2 = true;
			},
			confirmDelete() { // 确认删除
				let params = {
					ids: this.current.id
				}

				this.$u.api.postDeleteActivity(params).then(res => {
					if (res.code == 1000) {
						this.$refs.uToast.show({
							title: '已删除工作'
						});
						this.dropDown();
					}
				})
			},
			refund(item) { // 退押金
				this.isShow3 = true;
				this.current = item;
			},
			confirmRefund() {
				let params = {
					id: this.current.id
				}
				this.$u.api.postCashPledge(params).then(res => {
					if (res.code == 1000) {
						this.$u.toast('提交成功');
						this.dropDown();
					}
				})
			},
			editActivity(item) { // 修改活动
				return;
				uni.navigateTo({
					url: '/pages/talent/publish-post?id=' + item.id
				})
			},
			generateCode() {
				let userId = uni.getStorageSync('userId');
				let params = {
					busiType: 1,
					busiId: userId + ',GZ',
					url: 'pages/index/index'
				}
				this.$u.api.postGenerateQrCode(params).then(res => {
					if (res.status == true) {
						this.imageCode = 'data:image/jpeg;base64'+res.data;
					}
				})
			},
			openLocation(item) { // 打开地图
				uni.openLocation({
					latitude: item.latitude,
					longitude: item.longitude
				})
			},
			toggleShow(item) { // 切换显示雇工信息
				// console.log(item);
				item.show = !item.show;
			},
			reEdit(item) { // 编辑重发
				
				uni.navigateTo({
					url: '/pages/talent/publish-post?reId=' + item.recruit_id
				})
			},
			previewImageVideo(item, index) { // 预览图片视频
				uni.navigateTo({
					url: '/pages/preview/index?id=' + item.recruit_id + '&index=' + index
				})
			},
			makeCall(num) {
				uni.makePhoneCall({
					phoneNumber: num
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn {
		width:450rpx;
		position: relative;
		background-color: #DD524D;
	}
	
	.weixin{
		width:58rpx;
		height: 58rpx;
		position: absolute;
		left:40rpx;
		top:5rpx;
	}
	
	.panal {
		display: inline-block;
		padding: 5rpx 10rpx;
		background-color: #007AFF;
		margin-right: 10rpx;
		color: #fff;
		border-radius: 20rpx;
	}
	
	.panalc {
		display: inline-block;
		padding: 5rpx 10rpx;
		background-color: #4CD964;
		margin-right: 10rpx;
		color: #fff;
		border-radius: 20rpx;
	}
	.talent {
		position: relative;

		.top-img {
			position: relative;
			width: 750rpx;
			height: 333rpx;

			.img {
				width: 100%;
				height: 100%;
			}

			.qr-code {
				position: absolute;
				left: 55rpx;
				top: 90rpx;
				width: 142rpx;
				height: 143rpx;
				border: 6rpx solid;
				border-image: radial-gradient(circle, rgba(242, 142, 38, 1), rgba(253, 100, 79, 1)) 6 6;
				box-shadow: 0px 3rpx 7rpx 0px rgba(176, 55, 33, 0.35);

				.img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.btn-box {
			padding: 20rpx;
		}

		.list-wrap {
			padding: 0 20rpx 20rpx;

			.list-item {
				padding: 30rpx 20rpx;
				background: #fff;
				box-shadow: 0px 3px 7px 0px rgba(218, 218, 218, 0.35);
				border-radius: 6px;
				margin-bottom: 20rpx;

				.item-title {
					display: flex;
					justify-content: space-between;
					margin-bottom: 24rpx;

					.name {
						font-size: 30rpx;
						font-weight: bold;
						color: rgba(101, 101, 101, 1);
					}

					.price {
						font-size: 26rpx;
						font-weight: bold;
						color: rgba(236, 71, 21, 1);
					}
				}

				.item-con {
					border-bottom: 1px solid rgba(221, 221, 221, 1);
					padding-bottom: 10rpx;

					.con-row {
						display: flex;
						font-size: 24rpx;
						font-weight: 500;
						color: rgba(101, 101, 101, 1);
						line-height: 34rpx;
						margin-bottom: 18rpx;

						.txt {
							flex: none;
							margin-right: 10rpx;
						}

						.txt-info {
							flex: 1;
						}
					}

					.flex-row {
						display: flex;

						.left-info {
							flex: 1;
							margin-right: 20rpx;

							.row {
								font-size: 24rpx;
								font-weight: 500;
								color: rgba(153, 153, 153, 1);
								margin-bottom: 18rpx;
							}
						}

						.right-info {
							width: 84rpx;
							height: 74rpx;

							.img {
								width: 100%;
								height: 100%;
							}
						}
					}

					.con-bottom {
						display: flex;
						justify-content: space-between;

						.img-box {
							flex: 1;
							margin-right: 20rpx;

							.img {
								width: 90rpx;
								height: 90rpx;
								border-radius: 6px;
								margin-right: 10rpx;
							}
						}
					}

					.btn-wrap {
						padding: 10rpx 0 10rpx;
						text-align: right;
						.btn {
							height: 50rpx;
							padding: 0 40rpx;
							font-size: 26rpx;
							background: #4341BF;
							border-color: #4341BF;
							color: #fff;
							margin-left: 20rpx;
							display: inline-block;
							line-height: 50rpx;
							vertical-align: middle;
							border-radius: 25rpx;
						}
					}
				}
				
				.table-wrap {
					.more {
						padding: 20rpx 0 0;
						font-size: 24rpx;
						color: #999;
						text-align: center;
						.txt {
							margin-right: 10rpx;
						}
					}
					.list {
						margin-top: 15rpx;
					}
				}

				.light {
					color: #333;
					margin: 0 6rpx;
				}
			}
		}
	}
</style>
